<template>
	<view>
		<view v-show="!isWeXin" class="open-app" @click="open">
			<span>在App打开</span>
				<u-icon name="arrow-right" color="#FFFFFF" size="16px"></u-icon>
		</view>
		<!--  v-show="isWeXin" -->
		<view class="open-app" style="padding:0" v-show="isWeXin">
			<wx-open-launch-app id="launch-btn" @error="handleErrorFn" @launch="handleLaunchFn" :appid="appid"
				:extinfo="extinfo">
				<script type="text/wxtag-template">
					<style>.btn {border-width: 0;background-color: #FF6600;color:#fff;padding: 7px 3px 7px 15px;border-color: #FF6600;}</style>
				    <button class="btn">在App打开&nbsp;></button>
				  </script>
			</wx-open-launch-app>
		</view>
		<mask-weixin :maskDown="maskDown" @close="maskDown = false" />
	</view>
</template>
<script>
	import maskWeixin from './mask-weixin.vue'
	export default {
		props: ['extinfo'],
		components: {
			maskWeixin
		},
		data() {
			return {
				appid: 'wx1909c1e82a1200fe',
				isWeXin: false,
				maskDown: false,
				platform: '',
			}
		},
		created() {
			const oScript = document.createElement('script');
			oScript.type = 'text/javascript';
			oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
			document.body.appendChild(oScript);
		},
		mounted() {
			this.isWeXin = this.$u.utils.isWeiXin();
			this.platform = this.$u.utils.environment()
			this.wxInit()
		},
		methods: {
			wxInit() {
				let wxurl = window.location.href.split('#')[0];
				this.$u.api.wxConfig({
					url: wxurl
				}).then(res => {
					wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.noncestr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名，见附录1
						jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage',
							'onMenuShareQQ', 'onMenuShareWeibo', 'previewImage',
							'chooseImage', 'uploadImage', 'downloadImage',
							'hideOptionMenu', 'hideMenuItems', 'hideAllNonBaseMenuItem'
						],
						openTagList: ['wx-open-launch-app']
					});
				})

				// wx.ready(function() {
				// 	wx.checkJsApi({
				// 		jsApiList: ['wx-open-launch-app'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
				// 		success: function(res) {
				// 			alert('可用')
				// 		},
				// 		fail: (err) => {
				// 			console.log(err, '不可用')
				// 		}
				// 	});
				// })
			},
			// 监听error 函数
			handleErrorFn(e) {
				// 跳转失败
				// alert(JSON.stringify(e), '跳转失败')
				if (this.platform == 'ios') {
					this.maskDown = true;
					return
				} else {
					// 应用宝快步下载地址
					window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.microsight.kuaibu';
				}
			},
			// 监听launch 函数
			handleLaunchFn(e) {
				// 跳转成功
				// alert(JSON.stringify(e), '跳转成功')
			},
			open() {
				if (this.isWeXin) {
					this.maskDown = true;
					return
				} else {
					window.location.href = this.extinfo;
				}

			},
		}
	}
</script>
<style scoped>
	.open-app {
		position: fixed;
		z-index: 50;
		top: 100px;
		right: 0;
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #fff;
		background-color: #FF6600;
		padding: 7px 3px 7px 15px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
</style>
